<template>
  <div class="content order-list">
    <!--头部搜索信息-->
    <div class="list-top">
      <p class="title">订单查询</p>
      <div class="search-box">
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <div class="line-box">
              <span class="name">平台渠道：</span>
              <el-select v-model="selectedChannel" placeholder="请选择平台渠道" class="select-item-bix" @change="platformChannels">
                <el-option
                  v-for="item in platformChannelsBtns"
                  :key="item.id"
                  :label="item.platformName"
                  :value="item.id">
                </el-option>
              </el-select>
              </div>
              <div class="line-box">
              <span class="name-second">店铺账号：</span>
              <el-select v-model="conditions.storeId" class="select-item-bix" placeholder="请选择店铺账号">
                <el-option
                  v-for="item in shopListBtn"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
            <div class="grid-content-box">
              <el-input placeholder="请输入内容" v-model="selectInputValue" class="input-with-select">
                <el-select v-model="select" slot="prepend" placeholder="请选择">
                  <el-option label="订单编号" value="1"></el-option>
                  <el-option label="销售记录号" value="2"></el-option>
                  <el-option label="平台sku" value="3"></el-option>
                  <el-option label="系统sku" value="4"></el-option>
                  <el-option label="收件人" value="5"></el-option>
                  <el-option label="客户id" value="6"></el-option>
                </el-select>
              </el-input>
            </div>
              <div class="line-box line-box-time">
                <span class="name-second">订单日期：</span>
                <el-date-picker
                  v-model="orderTime"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetimerange"
                  @change="handleGetTime"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content-boxconyainer grid-content-box">
              <el-button type="success" @click="handleSearch">搜索</el-button>
              <el-button type="info" @click="clearCondtionParam">重置</el-button>
              <el-dropdown split-button type="primary" @command="handleChoseClick" placement="bottom-start">
                导入\导出
                <el-dropdown-menu slot="dropdown" >
                  <el-dropdown-item command="1">订单导入模版下载</el-dropdown-item>
                  <el-dropdown-item command="2">订单导入
                    <!--<el-upload-->
                      <!--class="upload-demo"-->
                      <!--action="/api/v1/common/order/import"-->
                      <!--:limit="1"-->
                      <!--:show-file-list="false"-->
                      <!--name="fileName"-->
                      <!--:on-success="handleSuccessFile"-->
                      <!--:on-progress="handleProgress"-->
                      <!--:on-error="handleErro"-->
                      <!--:file-list="fileList"-->
                      <!--:auto-upload="false">-->
                      <!--订单导入-->
                    <!--</el-upload>-->
                  </el-dropdown-item>
                  <!--<el-dropdown-item command="4">&nbsp;&nbsp;>9610模式</el-dropdown-item>-->
                  <!--<el-dropdown-item command="5">&nbsp;&nbsp;>非9610报关单模式</el-dropdown-item>-->
                  <!--<el-dropdown-item command="6">&nbsp;&nbsp;>非9610物流单模式</el-dropdown-item>-->
                  <el-dropdown-item command="3">订单导出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-button type="primary" v-if="$_has('sys:order:manual')" @click="handleCreatOrder">新增订单</el-button>
              <el-dropdown split-button type="primary" @command="handleSynchronizationClick">
                同步订单
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">同步订单</el-dropdown-item>
                  <el-dropdown-item command="2">同步日志查询</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-button class="last-button" type="primary" @click="handleDialogVisible">9610订单标记</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--table内容-->
    <div class="list-content">

      <div class="row">
        <div class="col-xs-12">
        <!--  <div class="box box-info">-->
            <!-- /.box-header -->
            <div class="box-body">
              <table id="example3" class="table table-bordered">
                <thead>
                <tr>
                  <th width="37px">缩略图</th>
                  <th>商品信息</th>
                  <th>客户ID</th>
                  <th>客户名</th>
                  <th>单价</th>
                  <th>数量</th>
                  <th>订单日期</th>
                  <th width="15%">配送信息</th>
                  <th>申报类型</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-if="orderList.length == 0">
                  <td colspan="8">没有数据</td>
                </tr>
                <template v-else v-for="orderItem in orderList">
                  <tr class="bg-info">
                    <td colspan="8" class="text-left">
                      <label>
                        平台：
                        <span class="m-lr-10">
                            {{handleChoseChannel(orderItem.channel)}}
                         </span>
                      </label>
                      <label>
                        订单编号：
                        <span class="m-lr-10">
                            {{orderItem.platformOrderId}}
                         </span>
                      </label>
                      <label>
                        销售记录号：
                        <span class="m-lr-10">
                            {{orderItem.record || '无'}}
                         </span>
                      </label>
                      <label>
                        订单金额：
                        <span class="m-lr-10">
                            {{orderItem.total ? toMoney(orderItem.total ) : '0.00'}}（含运费：{{orderItem.shippingPrice ? toMoney(orderItem.shippingPrice ):'0.00'}}）
                         </span>
                      </label>
                      <label>
                        币种：
                        <span class="m-lr-10">
                            {{orderItem.currency || '无'}}
                         </span>
                      </label>
                    </td>
                    <td colspan="2" class="text-right">
                    <span class="m-lr-10">
                      付款状态：<span class="text-green">{{returnPlatformStatus(orderItem.platformStatus)}}</span>
                    </span>
                      <span class="text-info">
                      状态：<span class="text-green">{{returnOrderStatus(orderItem.status)}}</span>
                    </span>
                    </td>
                  </tr>
                  <template v-for="(item, index) in orderItem.items">
                    <tr class="body-data">
                      <td  class="text-left" > <!--style="padding-left: 20px;width: 30%"-->
                        <img v-if="item.image" :src="item.image" alt="">
                        <img v-else src="@/assets/noPic.png" alt="">

                      </td>
                      <td>
                        <label class="m-l-15 product-name" >
                          <p>
                            <label>平台SKU：</label>
                            <span class="overHidden">{{item.sku}}</span>
                          </p>
                          <p>
                            <label>系统SKU：</label>
                            <span class="overHidden">{{item.erpSku}}</span>
                          </p>
                        </label>
                      </td>

                      <td>{{orderItem.buyerId}}</td>
                      <td>{{orderItem.name}}</td>
                      <td>{{item.price ? toMoney(item.price):'0.00'}}</td>
                      <td> {{item.quantity}}</td><!--v-if="orderItem.items.length>=1 && index==0" :rowspan="orderItem.items.length"-->
                      <td v-if="orderItem.items.length>=1 && index==0" :rowspan="orderItem.items.length">{{orderItem.orderCreated}}</td>
                      <td class="text-left" v-if="orderItem.items.length>=1 && index==0" :rowspan="orderItem.items.length"> <!--v-if="orderItem.items.length>=1 && index==0" :rowspan="orderItem.items.length"-->
                        <p> <label>收件人：</label><span class="overHidden">{{orderItem.receiver}}[{{orderItem.receiverCountry}}]</span></p>
                        <p><label style="font-weight: 700">物流渠道：</label> <span class="overHidden" v-for="item in logisticsListA" :key="item.code" v-if="item.code == orderItem.logistics">{{item.codeValue}}</span></p>
                      </td>
                      <td v-if="orderItem.items.length>=1 && index==0" :rowspan="orderItem.items.length">{{returnOrderType(orderItem.orderType)}}</td>
                      <td v-if="orderItem.items.length>=1 && index==0" :rowspan="orderItem.items.length"> <!---->
               <!--         <p>
                          <a v-if="orderItem.status == 2 && $_has('sys:order:prepare')" data-toggle="modal"
                             data-target="#modal-order-confirm"
                             @click="editOutGoods(orderItem.id,'2')">配货</a>
                          &lt;!&ndash;<router-link :to="{path:'/order/orderDetail',query: {operationType:'picking',id:orderItem.id}}" v-if="orderItem.status==2" class="text-blue m-lr-10">配货</router-link>&ndash;&gt;
                        </p>
                        <p>
                          <a v-if="orderItem.status == 3 && $_has('sys:order:logistics')" data-toggle="modal"
                             data-target="#modal-Delivery"
                             @click="confirmOutGoods(orderItem.orderId)">确认发货</a>
                          &lt;!&ndash;<router-link :to="{path:'/order/orderDetail',query: {operationType:'picking',id:orderItem.id}}" v-if="orderItem.status==2" class="text-blue m-lr-10">配货</router-link>&ndash;&gt;
                        </p>
                        <p>
                          <a v-if="orderItem.status == 1 && orderItem.platformStatus != 1 && $_has('sys:order:confirm')"
                             data-toggle="modal"
                             data-target="#modal-order-confirm"
                             @click="confirmOrder(orderItem.id,'1')">确认订单</a>
                          &lt;!&ndash;<router-link :to="{path:'/order/orderDetail',query: {operationType:'confirm',id:orderItem.id}}" v-if="orderItem.status==1" class="text-blue m-lr-10">确认订单</router-link>&ndash;&gt;
                        </p>
                        <p>
                          <a
                            v-if="orderItem.status != 3 && orderItem.status != 4 && orderItem.status != 5 && $_has('sys:order:cancel')"
                            class="text-blue m-lr-10" data-toggle="modal" data-target="#modal-order-cancel"
                            @click="orderCancel(orderItem.orderId)">取消订单</a>
                        </p>-->
                        <div class="icon-box">
                          <p style="display: inline-block ; margin-right: 8px">
                            <a @click="viewOrderDdit(orderItem.id)" v-if="orderItem.status == 5">
                              <img src="../../assets/edite.png" alt="" style="display: inline-block;width: 18px;height: 18px;vertical-align: baseline;
position: relative;top: 2px;">
                             <!-- <i class="el-icon-edit-outline" ></i>--></a>
                            <!--<router-link :to="{path:'/order/orderDetail',query: {id:orderItem.id}}" class="text-blue m-lr-10" data-toggle="modal" data-target="#modal-order-confirm">详情</router-link>-->
                          </p>
                          <p  style="display: inline-block">

                            <a @click="viewOrderDetail(orderItem.id)" v-if="$_has('sys:order:get')">
                              <img src="../../assets/look.png" alt="" style="display: inline-block;width: 18px;height: 18px;vertical-align: baseline;
position: relative;top: 2px;">
                             <!-- <i class="el-icon-search" style="display: inline-block;font-size: 20px;font-weight: 400"></i>-->
                            </a>
                            <!--<router-link :to="{path:'/order/orderDetail',query: {id:orderItem.id}}" class="text-blue m-lr-10" data-toggle="modal" data-target="#modal-order-confirm">详情</router-link>-->
                          </p>
                        </div>

                      </td>
                    </tr>
                  </template>
                </template>
                </tbody>
              </table>
              <div class="clearfix" v-if="orderList.length != 0">
                <div class="m-t-15 pull-right">
                  <el-pagination
                    background
                    layout="total,prev, pager, next"
                    :current-page="currentPage"
                    @current-change="pagechange"
                    :page-count="pages.total"
                    :total="totalNumPage">
                  </el-pagination>
                <!--  <pagination :total="pages.total" :current-page='pages.current' :display="pages.display"
                              @pagechange="pagechange"></pagination>-->
                </div>
              </div>
            </div>
            <!-- /.box-body -->
         <!-- </div>-->
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>

      <div class="modal fade" id="modal-order-confirm">
        <div class="modal-dialog modal-other-width">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">{{modalTitle}}</h4>
            </div>
            <div class="modal-body">
              <div class="row form-group">
                <div class="col-xs-12">
                  <div class="box">
                    <div class="box-header" style="border-bottom: 1px solid rgb(226, 225, 225)">
                      <h3 class="box-title">订单信息</h3><el-button style="float: right" type="primary" size="mini" @click="print">打印</el-button>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body" style="overflow: hidden">
                      <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                        <div class="col-sm-6 flex">
                          <label class="control-label min-width">订单编号：</label>
                          <div class="inline-block">
                            <label class="control-label">{{orderDetail.platformOrderId}}</label>
                          </div>
                        </div>
                        <div class="col-sm-6 flex">
                          <label class="control-label min-width">订单状态：</label>
                          <div class="inline-block">
                            <label class="control-label">{{returnOrderStatus(orderDetail.status)}}</label>
                          </div>
                        </div>
                      </div>
                      <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                        <div class="col-sm-6 flex">
                          <label class="control-label min-width">销售记录号：</label>
                          <div class="inline-block">
                            <label class="control-label">{{orderDetail.record}}</label>
                          </div>
                        </div>
                        <div class="col-sm-6 flex">
                          <label class="control-label min-width">店铺：</label>
                          <div class="inline-block">
                            <label class="control-label">{{getStoreNameById(orderDetail.storeId)}}</label>
                          </div>
                        </div>
                      </div>
                      <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                        <div class="col-sm-6 flex">
                          <label class="control-label min-width">订单金额：</label>
                          <div class="inline-block">
                            <div class="input-group">
                              <input :disabled="!showFlag" type="text" class="form-control"
                                     :value="orderDetail.total"><span class="input-group-addon">USD</span>
                            </div>
                          </div>
                        </div>
                        <div class="col-sm-6 flex">
                          <label class="control-label min-width">邮资：</label>
                          <div class="inline-block">
                            <div class="input-group">
                              <input :disabled="!showFlag" type="text" class="form-control"
                                     :value="orderDetail.shipping"><span class="input-group-addon">USD</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                        <div class="col-sm-6 flex">
                          <label class="control-label min-width">平台费用：</label>
                          <div class="inline-block">
                            <div class="input-group">
                              <input :disabled="!showFlag" type="text" class="form-control"
                                     v-model="orderDetail.platformFee"><span class="input-group-addon">USD</span>
                            </div>
                          </div>
                        </div>
                        <div class="col-sm-6 flex">
                          <label class="control-label min-width">转账费：</label>
                          <div class="inline-block">
                            <div class="input-group">
                              <input :disabled="!showFlag" type="text" class="form-control"
                                     v-model="orderDetail.transferFee"><span class="input-group-addon">USD</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                        <div class="col-sm-6 flex">
                          <label class="control-label min-width">收款账号：</label>
                          <div class="inline-block">
                            <div class="">
                              <input :disabled="!showFlag" type="text" class="form-control"
                                     v-model="orderDetail.account">
                            </div>
                          </div>
                        </div>
                        <div class="col-sm-6 flex">
                          <label class="control-label min-width">付款时间：</label>
                          <div class="inline-block">
                            <!-- <div class=""> -->
                              <!-- <input :disabled="!showFlag" type="text" class="form-control" -->
                                     <!-- v-model="orderDetail.payTimeStr"> -->
                                     <el-date-picker class="linehe"
                                        v-model="orderDetail.payTimeStr"
                                        type="datetime"
                                        style="width: 100%"
                                        placeholder="输入付款时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
                                      </el-date-picker>
                            <!-- </div> -->
                          </div>
                        </div>
                      </div>
                      <div style="padding: 4px 0;" class="row">
                        <div class="col-sm-6 flex">
                          <label class="control-label min-width">退补类型：</label>
                          <div class="inline-block">
                            <select class="form-control" :disabled="!showFlag" v-model="orderDetail.treatType">
                              <option :value="type.code" v-for="type in retreatingType">{{type.codeValue}}</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-sm-6 flex">
                          <label class="control-label min-width">退补金额：</label>
                          <div class="inline-block">
                            <div class="">
                              <input type="text" class="form-control" :disabled="!showFlag"
                                     v-model="orderDetail.treatMoney">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- /.box-body -->
                  </div>
                  <!-- /.box -->
                </div>
              </div>
              <div class="row form-group">
                <div class="col-xs-6">
                  <div class="box">
                    <div class="box-header" style="border-bottom: 1px solid rgb(226, 225, 225)">
                      <h3 class="box-title">平台留言</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body" style="overflow: hidden">
                      <textarea v-model="orderDetail.message" class="form-control" rows="10"
                                disabled="disabled"></textarea>
                    </div>
                    <!-- /.box-body -->
                  </div>
                  <!-- /.box -->
                </div>

                <div class="col-xs-6">
                  <div class="box">
                    <div class="box-header" style="border-bottom: 1px solid rgb(226, 225, 225)">
                      <h3 class="box-title">订单备注</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body" style="overflow: hidden">
                      <textarea v-model="orderDetail.remark" class="form-control" rows="10"
                                :disabled="!showFlag"></textarea>
                    </div>
                    <!-- /.box-body -->
                  </div>
                  <!-- /.box -->
                </div>
              </div>
              <div class="row form-group">
                <div class="col-xs-12">
                  <div class="box">
                    <div class="box-header" style="border-bottom: 1px solid rgb(226, 225, 225)">
                      <h3 class="box-title p-lr-10">客户信息</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body" style="overflow: hidden">
                      <div>
                        <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                          <div class="col-sm-6 flex">
                            <label class="control-label min-width"><sub class="text-red">*</sub>客户ID：</label>
                            <div class="inline-block">
                              <div class="">
                                <input :disabled="!showFlag" type="text" class="form-control"
                                       v-model="orderDetail.buyerId">
                              </div>
                            </div>
                          </div>
                          <div class="col-sm-6 flex">
                            <label class="control-label min-width"><sub class="text-red">*</sub>客户姓名：</label>
                            <div class="inline-block">
                              <div class="">
                                <input :disabled="!showFlag" type="text" class="form-control"
                                       v-model="orderDetail.name">
                              </div>
                            </div>
                          </div>
                        </div>
                        <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                          <div class="col-sm-6 flex">
                            <label class="control-label min-width">联系电话1：</label>
                            <div class="inline-block">
                              <div class="">
                                <input :disabled="!showFlag" type="text" class="form-control"
                                       v-model="orderDetail.phone">
                              </div>
                            </div>
                          </div>
                          <div class="col-sm-6 flex">
                            <label class="control-label min-width">联系电话2：</label>
                            <div class="inline-block">
                              <div class="">
                                <input :disabled="!showFlag" type="text" class="form-control"
                                       v-model="orderDetail.otherPhone">
                              </div>
                            </div>
                          </div>
                        </div>
                        <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                          <div class="col-sm-6 flex">
                            <label class="control-label min-width">联系邮箱：</label>
                            <div class="inline-block">
                              <div class="">
                                <input :disabled="!showFlag" type="text" class="form-control"
                                       v-model="orderDetail.mail">
                              </div>
                            </div>
                          </div>
                          <div class="col-sm-6 flex">
                            <label class="control-label min-width">所属国家：</label>
                            <div class="inline-block">
                              <div class="">
                                <select name="" class="form-control" v-model="orderDetail.country"
                                        :disabled="!showFlag">
                                  <option v-for="country in countryOptions" :value="country.code">{{country.name}}
                                  </option>
                                </select>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                          <div class="col-sm-6 flex">
                            <label class="control-label min-width">省/州：</label>
                            <div class="inline-block">
                              <div class="">
                                <input :disabled="!showFlag" type="text" class="form-control"
                                       v-model="orderDetail.state">
                              </div>
                            </div>
                          </div>
                          <div class="col-sm-6 flex">
                            <label class="control-label min-width">所属城市：</label>
                            <div class="inline-block">
                              <div class="">
                                <input :disabled="!showFlag" type="text" class="form-control"
                                       v-model="orderDetail.city">
                              </div>
                            </div>
                          </div>
                        </div>
                        <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                          <div class="col-sm-6 flex">
                            <label class="control-label min-width">邮编：</label>
                            <div class="inline-block">
                              <div class="">
                                <input :disabled="!showFlag" type="text" class="form-control"
                                       v-model="orderDetail.postalCode">
                              </div>
                            </div>
                          </div>
                          <div class="col-sm-6 flex">
                            <label class="control-label min-width">门牌号：</label>
                            <div class="inline-block">
                              <div class="">
                                <input :disabled="!showFlag" type="text" class="form-control"
                                       v-model="orderDetail.houseNumber">
                              </div>
                            </div>
                          </div>
                        </div>
                        <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                          <div class="col-sm-12 flex">
                            <label class="control-label min-width">邮寄地址：</label>
                            <div class="inline-block">
                              <div class="">
                                <input :disabled="!showFlag" type="text" class="form-control"
                                       v-model="orderDetail.street1">
                              </div>
                            </div>
                          </div>
                        </div>
                        <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                          <div class="col-sm-12 flex">
                            <label class="control-label min-width">备用地址：</label>
                            <div class="inline-block">
                              <div class="">
                                <input :disabled="!showFlag" type="text" class="form-control"
                                       v-model="orderDetail.street2">
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- /.box-body -->
                  </div>
                  <!-- /.box -->
                </div>
              </div>
              <div class="form-horizontal">
                <div class="">
                  <div class="row">
                    <div class="col-md-12">
                      <div class="bg-gray">
                        <div class="pull-left">
                          <label>商品信息</label>
                        </div>
                      </div>
                      <table class="table table-bordered">
                        <thead class="bg-info">
                        <tr>
                          <th>平台商品</th>
                          <th style="width: 250px">库存商品</th>
                          <th style="width: 150px;">单价</th>
                          <th style="width: 180px">发货仓库[可用库存]</th>
                          <th style="width: 150px;">发货数量</th>
                          <th style="width: 150px;" v-show="showFlag">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(orderItem,itemIndex) in orderDetail.items" :key="itemIndex">
                          <td>
                            <img :src="orderItem.image" alt="">
                            <label class="m-l-15">
                              <p>
                                <span>{{orderItem.sku}}</span>
                              </p>
                              <p>
                                <span class="span-over">{{orderItem.title}}</span>
                              </p>
                            </label>
                          </td>
                          <td>
                            <div class="input-group">
                              <input :disabled="!showFlag" class="form-control" placeholder=""
                                     v-model="orderItem.factSku">
                              <span v-show="showFlag" class="input-group-addon bg-green curren" data-toggle="modal"
                                    data-target="#modal-addGoods" @click="addProduct(itemIndex)">更换</span>
                            </div>
                            <p class="text-left">
                              {{orderItem.factTitle}}
                            </p>
                          </td>
                          <td>
                            <input @blur="countTotalPrice()" :disabled="!showFlag" type="text" class="form-control"
                                   v-model="orderItem.price">
                          </td>
                          <td>
                            <select @click="getStockQuetity(orderItem.stockId,itemIndex)" class="form-control"
                                    :disabled="!showFlag" v-model="orderItem.stockId">
                              <div>
                                <span
                                  v-for="wareHouseOption in orderItem.wareHouseOptions">{{wareHouseOption.whName}}</span>
                              </div>
                              <option :value="wareHouseOption.whId"
                                      v-for="wareHouseOption in orderItem.wareHouseOptions">
                                {{wareHouseOption.whName}}({{wareHouseOption.stockQty}})
                              </option>
                            </select>
                          </td>
                          <td :class="">
                            <input @blur="countTotalPrice(itemIndex)" :disabled="!showFlag" type="text"
                                   class="form-control" v-model="orderItem.quantity">
                          </td>
                          <td v-show="showFlag">
                            <a href="javascript:;" class="text-blue" @click="addStockGoods(itemIndex)">添加库存商品</a>
                            <a href="javascript:;" class="text-blue" @click="deleteStockGoods(itemIndex)">删除</a>
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <!-- /.col -->
                </div>
              </div>
            </div>
            <div class="modal-footer text-center">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              <button v-show="showFlag" type="button" class="btn btn-primary" @click="commit(orderDetail.id)">保存
              </button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>

        <div class="modal-dialog for-print">
          <h3 class="box-title">订单信息</h3>
          <div>
            <label class="control-label min-width">订单编号：</label>
            <label class="control-label">{{orderDetail.platformOrderId}}</label>
          </div>
          <div>
            <label class="control-label min-width">订单状态：</label>
            <label class="control-label">{{returnOrderStatus(orderDetail.status)}}</label>
          </div>
          <div>
            <label class="control-label min-width">销售记录号：</label>
            <label class="control-label">{{orderDetail.record}}</label>
          </div>
          <div>
            <label class="control-label min-width">店铺：</label>
            <label class="control-label">{{getStoreNameById(orderDetail.storeId)}}</label>
          </div>
          <div>
            <label class="control-label min-width">订单金额：</label>
            <label class="control-label">{{orderDetail.total}}</label>
          </div>
          <div>
            <label class="control-label min-width">邮资：</label>
            <label class="control-label">{{orderDetail.shipping}}</label>
          </div>
          <div>
            <label class="control-label min-width">平台费用：</label>
            <label class="control-label">{{orderDetail.platformFee}} USD</label>
          </div>
          <div>
            <label class="control-label min-width">转账费：</label>
            <label class="control-label">{{orderDetail.transferFee}} USD</label>
          </div>
          <div>
            <label class="control-label min-width">收款账号：</label>
            <label class="control-label">{{orderDetail.account}}</label>
          </div>
          <div>
            <label class="control-label min-width">付款时间：</label>
            <label class="control-label">{{orderDetail.payTimeStr}}</label>
          </div>
          <div>
            <label class="control-label min-width">退补类型：</label>
            <label class="control-label">{{retreatingTypeStr}}</label>
          </div>
          <div>
            <label class="control-label min-width">退补金额：</label>
            <label class="control-label">{{orderDetail.treatMoney}}</label>
          </div>
          <div class="full-row" style="min-height: 40px">
            <label class="control-label min-width">平台留言：</label>
            <label class="control-label">{{orderDetail.message}}</label>
          </div>
          <div class="full-row" style="min-height: 40px">
            <label class="control-label min-width">订单备注：</label>
            <label class="control-label">{{orderDetail.remark}}</label>
          </div>

          <h3 style="margin-top: 10px">客户信息</h3>
          <div>
            <label class="control-label min-width"><sub class="text-red">*</sub>客户ID：</label>
            <label class="control-label">{{orderDetail.buyerId}}</label>
          </div>
          <div>
            <label class="control-label min-width"><sub class="text-red">*</sub>客户姓名：</label>
            <label class="control-label">{{orderDetail.name}}</label>
          </div>
          <div>
            <label class="control-label min-width">联系电话1：</label>
            <label class="control-label">{{orderDetail.phone}}</label>

          </div>
          <div>
            <label class="control-label min-width">联系电话2：</label>
            <label class="control-label">{{orderDetail.otherPhone}}</label>

          </div>
          <div>
            <label class="control-label min-width">联系邮箱：</label>
            <label class="control-label">{{orderDetail.mail}}</label>

          </div>
          <div>
            <label class="control-label min-width">所属国家：</label>

            <label class="control-label">{{countryName}}</label>
          </div>
          <div>
            <label class="control-label min-width">省/州：</label>
            <label class="control-label">{{orderDetail.state}}</label>
          </div>
          <div>
            <label class="control-label min-width">所属城市：</label>
            <label class="control-label">{{orderDetail.city}}</label>
          </div>
          <div>
            <label class="control-label min-width">邮编：</label>

                              <label class="control-label">{{orderDetail.postalCode}}</label>

          </div>
          <div>
            <label class="control-label min-width">门牌号：</label>
                            <label class="control-label">{{orderDetail.houseNumber}}</label>

          </div>
          <div>
            <label class="control-label min-width">邮寄地址：</label>

                              <label class="control-label">{{orderDetail.street1}}</label>

          </div>
          <div>
            <label class="control-label min-width">备用地址：</label>
                              <label class="control-label">{{orderDetail.street2}}</label>

          </div>

          <div style="height: 10px; width: 100%"></div>
          <h3 style="padding-top: 10px">商品信息</h3>
          <table class="table table-bordered" border="1" style="width: 100%; border-collapse:collapse; text-align: center">
            <thead class="bg-info">
            <tr>
              <th>平台商品</th>
              <th>库存商品</th>
              <th>单价</th>
              <th>发货仓库[可用库存]</th>
              <th>发货数量</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(orderItem,itemIndex) in orderDetail.items" :key="itemIndex">
              <td>
                {{orderItem.sku}}-{{orderItem.title}}
              </td>
              <td>
                  {{orderItem.factSku}}-{{orderItem.factTitle}}
              </td>
              <td>
                {{orderItem.price}}
              </td>
              <td>
                {{getWarehouse(orderItem.wareHouseOptions, orderItem.stockId)}}
              </td>
              <td>
                {{orderItem.quantity}}
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <!-- /.modal-dialog -->
      </div>

      <div class="modal fade" id="modal-Delivery">
        <div class="modal-dialog maxwModal">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">物流配送</h4>
            </div>
            <div class="modal-body">
              <form class="form-horizontal">
                <div class="box-body">
                  <div class="col-sm-12">
                    <div class="form-group flex">
                      <label class="control-label min-width">物流渠道：</label>
                      <div class="inline-block">
                        <select name="" class="form-control" v-model="orderConfirmParam.logistics">
                          <option value="">请选择物流渠道</option>
                          <option :value="logisticsListItem.id" v-for="logisticsListItem in logisticsList">
                            {{logisticsListItem.codeValue}}
                          </option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group flex">
                      <label class="control-label min-width">物流单号：</label>
                      <div class="inline-block">
                        <input type="text" class="form-control" placeholder="请输入物流单号"
                               v-model="orderConfirmParam.billCode">
                      </div>
                    </div>
                    <div class="form-group flex">
                      <label class="control-label min-width">申报模式：</label>
                      <div class="inline-block">
                        <!-- <label for="auction" class="no-padding ">
                          <input id="auction" type="radio" class="flat-red" v-model="orderConfirmParam.orderType"
                                 value="1"> 9610
                        </label> -->
                        <label for="fixed" class="m-lr-10" style="padding-left: 20px;">
                          <input id="fixed" type="radio" class="flat-red" v-model="orderConfirmParam.orderType"
                                 value="0"> 非9610
                        </label>
                      </div>
                    </div>

                  </div>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" @click="okOutGoods()">保存</button>
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <div class="modal fade" id="modal-delivery-delete">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header bg-info">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">取消发货</h4>
            </div>
            <div class="modal-body">
              <div class="form-horizontal max_height">
                <div class="box-body">
                  <div class="form-group">
                    <div class="col-sm-6 flex">
                      <label class="control-label bg-gray min-width">订单编号：</label>
                      <label class="control-label min-width">TR201803291754420021</label>
                    </div>
                    <div class="col-sm-6 flex">
                      <label class="control-label bg-gray min-width">买家信息：</label>
                      <label class="control-label min-width">4343452@xx.com</label>
                    </div>
                    <div class="col-sm-6 flex">
                      <label class="control-label bg-gray min-width">订单日期：</label>
                      <label class="control-label min-width">2018-04-01 23:55:21</label>
                    </div>
                    <div class="col-sm-6 flex">
                      <label class="control-label bg-gray min-width">买家地址：</label>
                      <label class="control-label min-width">XXXXXXXXXXXXXXXX</label>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-12">
                      <table class="table table-bordered table-hover marginNonde">
                        <thead>
                        <tr>
                          <th style="width: 13%;">商品编号</th>
                          <th>商品名称</th>
                          <th>可用库存</th>
                          <th>发货仓库</th>
                          <th style="width: 10%;">发货数量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="text-left">
                          <td>
                            000201010
                          </td>
                          <td class="text-left" style="padding-left: 20px;">
                            XXXXXXXXXXXXXXX
                          </td>
                          <td>
                            33
                          </td>
                          <td>无锡仓</td>
                          <td>
                            3
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-12">
                      <div class="m-b-15"><span>取消原因</span></div>
                      <div class="">
                        <textarea name="" style="height: 150px;" class="form-control" placeholder="请输入取消原因"></textarea>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer text-center">
              <button type="button" class="btn btn-primary">保存</button>
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <div class="modal fade" id="modal-order-cancel">
        <div class="modal-dialog maxwModal">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">取消订单</h4>
            </div>
            <div class="modal-body">
              <form class="form-horizontal">
                <div class="box-body">
                  <div class="form-group">
                    <label class="control-label">备注：</label>
                    <div class="">
                      <textarea v-model="cancelOrderParam.remark" cols="20" rows="5" class="form-control"></textarea>
                    </div>
                  </div>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" @click="cancelOrderSubmit()">保存</button>
              <button type="button" class="btn btn-default" data-dismiss="modal" @click="clearParam()">关闭</button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <div class="modal fade" id="modal-addGoods">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="clearParam()">
                <span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">选择商品</h4>
            </div>
            <div class="modal-body">
              <form class="form-horizontal">
                <div class="box-body">
                  <div class="form-group">
                    <div class="col-sm-6">
                      <label class="control-label">输入搜索：</label>
                      <input type="text" class="form-control" v-model="sku">
                    </div>
                    <div class="col-sm-6">
                      <label class="control-label">
                      </label>
                      <div class="form-control no-border">
                        <button class="btn btn-info pull-left" @click="addProduct()">搜&nbsp;索</button>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-12">
                      <!--<button type="button" class="btn btn-success pull-left m-r-10" data-toggle="modal" data-target="#modal-default">创建调拨单</button>-->
                    </label>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-12">
                      <table id="example5" class="table table-bordered table-hover marginNonde">
                        <thead>
                        <tr>
                          <th>
                            <label>
                              <input type="checkbox" class="flat-red" disabled="disabled">
                            </label>
                          </th>
                          <th>商品图片</th>
                          <th>商品信息</th>
                          <th>可用库存</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(addProductListItem, index) in addProductList" @dblclick="replaceGoods(index)">
                          <td>
                            <label>
                              <input type="checkbox" class="flat-red" :value="index"
                                     v-model="checkedProduct">
                            </label>
                          </td>
                          <td>
                            <img :src="addProductListItem.goodsPic" alt="">
                          </td>
                          <td class="text-left">
                            <label class="m-l-15">
                              <p>
                                <label>商品编码：</label>
                                <span>{{addProductListItem.sku}}</span>
                              </p>
                              <p>
                                <label>商品名称：</label>
                                <span>{{addProductListItem.goodsName}}</span>
                              </p>
                              <p>
                                <label>品牌名称：</label>
                                <span>{{addProductListItem.brandName}}</span>
                              </p>
                            </label>
                          </td>
                          <td>
                            {{addProductListItem.countStock}}
                          </td>
                        </tr>
                        </tbody>
                      </table>
                      <div class="clearfix">
                        <div class="m-t-15 pull-right">
                          <pagination :total="inventory.total" :current-page='inventory.pageNum'
                                      :display="inventory.dispaly" @pagechange="pagechange1"></pagination>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" @click="replaceGoods()">保存</button>
              <button type="button" class="btn btn-default" data-dismiss="modal" @click="clearParam()">关闭</button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>

      <!--9610订单标记-->

      <el-dialog
        title="9610订单标记"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="80%">
        <div class="pop-out-container">
          <div class="order-search">
              <p class="title">订单查询</p>
             <el-row>
               <el-col :span="6">
                 <div class="grid-content first">
                   平台渠道：
                   <el-select v-model="searchPopChannel" placeholder="请选择"  @change="popPlatformChannels">
                     <el-option
                       v-for="item in platformChannelsBtns"
                       :key="item.id"
                       :label="item.platformName"
                       :value="item.id">
                     </el-option>
                 </el-select>
                 </div>
               </el-col>
               <el-col :span="6">
                 <div class="grid-content">
                   店铺：
                   <el-select v-model="searchPopShop" placeholder="请选择">
                     <el-option
                       v-for="item in searchPopshopListBtn"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
                     </el-option>
                   </el-select>
                 </div>
               </el-col>
               <el-col :span="8">
                 <div class="grid-content">
                  <span>订单日期：</span>
                   <el-date-picker
                     v-model="searchPopTimeList"
                     format="yyyy-MM-dd HH:mm:ss"
                     value-format="yyyy-MM-dd HH:mm:ss"
                     type="datetimerange"
                     range-separator="至"
                     start-placeholder="开始日期"
                     end-placeholder="结束日期">
                   </el-date-picker>
                 </div>
               </el-col>
               <el-col :span="4">
                 <div class="grid-content">
                   <el-button type="success" @click="popCurrentPageSearch">筛选订单</el-button>
                 </div>
               </el-col>
             </el-row>
           </div>
          <div class="search-body">
             <div class="search-num">
               <el-row>
                 <el-col :span="24">
                   <div class="grid-content">
                     订单编号：<el-input v-model="searchPopPlatformOrderId" placeholder="请输入内容"></el-input>
                     <el-button type="success" @click="handleSearchPlatformOrderId">搜索</el-button>
                     <el-button type="primary" @click="innerVisible = true">标记9610</el-button>
                   </div>
                 </el-col>
               </el-row>
               <el-table
                 :data="showTableList"
                 style="width: 100%">
                 <el-table-column
                   prop="orderCreated"
                   label="订单日期">
                 </el-table-column>
                 <el-table-column
                   prop="platformOrderId"
                   label="订单编号">
                   <template slot-scope="scope">
                     <div class="order-id-platform">
                       {{scope.row.platformOrderId}}
                     </div>
                   </template>
                 </el-table-column>
                 <el-table-column
                   prop="total"
                   label="订单金额">
                 </el-table-column>
                 <el-table-column
                   prop="orderType"
                   label="申报类型">
                   <template slot-scope="scope">
                     <div class="order-type">
                        {{returnOrderType(scope.row.orderType)}}
                     </div>
                   </template>
                 </el-table-column>
                 <el-table-column
                   prop="address"
                   label="操作">
                   <template slot-scope="scope">
                     <div class="order-id-platform">
                       <i class="el-icon-delete" @click="handleClickDelet(scope.row.id)"></i>
                     </div>
                   </template>
                 </el-table-column>
               </el-table>
               <div class="page-ination">
                 <el-pagination
                   background
                   layout="total,prev, pager, next"
                   :page-size="10"
                   :current-page="popCurrentPage"
                   @current-change="popPageChange"
                   :total="popTotalCount">
                 </el-pagination>
               </div>

             </div>
          </div>
        </div>

        <el-dialog
          width="40%"
          title="标记9610"
          :visible.sync="innerVisible"
          :close-on-click-modal="false"
          append-to-body>
          <div class="inner-popContainer">
            <div class="warn">
              <p><span>温馨提示：</span>请输入该批订单的申报关区代码</p>
            </div>

            <div class="customs-no">
              申报关区代码：<el-input v-model="customsNo" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="popOutSubmit">确 定</el-button>
             <el-button @click="innerVisible = false">取 消</el-button>
          </span>
        </el-dialog>
        <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关 闭</el-button>
        </span>
      </el-dialog>
      <!--同步订单 -->
      <el-dialog
        title="同步订单"
        :visible.sync="dialogVisibleSynchronous"
        :close-on-click-modal="false"
        width="50%">
        <div class="pop-synchronous">
           <div class="select-item">
             <p class="second"><span class="need">平台：</span></p>
             <el-select v-model="synchronousChannel" placeholder="请选择" @change="popSynchronousChannels">
               <el-option
                 v-for="item in platformChannelsBtns"
                 :key="item.id"
                 :label="item.platformName"
                 :value="item.id">
               </el-option>
             </el-select>
           </div>
          <div class="select-item">
            <p class="second"><span class="need">店铺：</span></p>
            <el-select v-model="synchronousshopValue" placeholder="请选择">
              <el-option
                v-for="item in synchronousshopListBtn"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="select-item">
            <p class="second"><span class="">订单日期：</span></p>
            <el-date-picker
              v-model="synchronousTimeList"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
           <el-button  type="primary"  @click="orderUpload">确 定 </el-button>
           <el-button @click="dialogVisibleSynchronous = false">关 闭</el-button>
         </span>
      </el-dialog>

      <!--订单导入 -->
      <el-dialog
        title="订单导入"
        :visible.sync="dialogVisibleChose"
        :close-on-click-modal="false"
        width="580px">
        <div class="pop-synchronous">
          <div class="select-item">
            <p class="second"><span>申报类型：</span></p>
            <el-radio-group v-model="orderForm.orderType">
              <el-radio :label="1">9610模式</el-radio>
              <el-radio :label="0">非9610报关单模式</el-radio>
              <!--<el-radio :label="2">非9610物流单模式</el-radio>-->
            </el-radio-group>
          </div>
          <div class="select-item">
            <p class="second"><span>&nbsp;</span></p>
            <el-upload
              class="upload-demo"
              ref="upload"
              :action="importUrl"
              :limit="1"
              :show-file-list="true"
              name="fileName"
              :on-success="handleSuccessFile"
              :on-progress="handleProgress"
              :on-error="handleErro"
              :file-list="fileList"
              :auto-upload="false">
              <!--:data="orderForm"-->
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
              <!--<el-button @click="dialogVisibleChose = false">关 闭</el-button>-->
            </el-upload>
          </div>
        </div>
      </el-dialog>

      <!--订单导入失败-->

      <el-dialog
        title="失败"
        class="fail"
        :visible.sync="dialogVisibleFaill"
        :close-on-click-modal="false"
        width="700px">
        <div class="pop-fail">
           <div class="fail-num">
             <p>本次导入订单成功 <span class="success">{{successCount}}</span>条，失败 <span class="failnum">{{errorCount}}</span>条，失败原因见清单！</p>
             <el-button type="primary" @click="downLoadFail">导出订单信息</el-button>
           </div>
          <el-table
            :data="showFaildetailOut"
            style="width: 100%">
            <el-table-column
              prop="orderNo"
              label="订单编号">
            </el-table-column>
            <el-table-column
              prop="error"
              label="未导入原因">
            </el-table-column>
          </el-table>
          <div class="page-ination" style="text-align: right; margin-top: 15px">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="10"
            :current-page="failIndex"
            @current-change="failPopPageChange"
            :total="faildetailOut.length">
          </el-pagination>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
           <el-button @click="dialogVisibleFaill = false">关闭</el-button>
         </span>
      </el-dialog>
      <el-dialog
        title="失败"
        class="fail"
        :visible.sync="dialogVisibleFaillSecond"
        :close-on-click-modal="false"
        width="340px">
        <div class="pop-fail" style="font-size:14px;font-weight:400;">
           {{failMessage}}
        </div>
      </el-dialog>
     <!--成功-->
      <el-dialog
        title="成功"
        class="success"
        :visible.sync="dialogVisibleSuccess"
        :close-on-click-modal="false"
        width="340px" >
        <div class="pop-fail" style="font-size:14px;font-weight:400;">
          <div style="font-size:14px;font-weight:400;">
            本次导入订单成功！
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import orderList from '@/js/order/orderList'

  export default orderList
</script>
<style>
  .upload-demo .el-upload__input{
    display: none;
  }
</style>
<style scoped lang="less">
  .order-list{
    .list-content {
      .el-dialog__header {
        border-bottom: 1px solid;
      }
      .pop-out-container {
        .order-search {
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
          border-radius: 4px;
          border: 1px solid rgba(228, 231, 237, 1);
          padding-bottom: 20px;
          .title {
            border-left: 2px solid #67C23A;
            line-height: 31px;
            height: 31px;
            font-size: 16px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            padding-left: 18px;
            position: relative;
            margin-bottom: 20px;
            &:after {
              content: '';
              width: 98%;
              height: 1px;
              border-top: 1px solid #E4E7ED;
              position: absolute;
              bottom: -4px;
              left: 0;
              right: 0;
              margin: 0 auto;
            }
          }
          .first {
            padding-left: 15px;
          }
          .grid-content {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: 400;
            color: rgba(96, 98, 102, 1);
            span{
              width: 80px;
            }
            .el-dropdown{
              margin-bottom: 20px;
            }
            .el-button{
              margin-left: 15px;
              margin-bottom: 20px;
            }
          }
        }
        .search-body {
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
          border-radius: 4px;
          border: 1px solid rgba(228, 231, 237, 1);
          margin-top: 20px;
          padding: 20px;
          .search-num {
            .grid-content {
              display: flex;
              align-items: center;
              font-size: 14px;
              font-weight: 400;
              color: rgba(96, 98, 102, 1);
              .el-input {
                width: 40%;
                margin-right: 20px;
              }
            }
            .order-id-platform {
              color: #409EFF;
            }
            .page-ination {
              margin-top: 20px;
              text-align: right;
            }
          }

        }
      }
      .inner-popContainer {
        .warn {
          background: rgba(253, 246, 236, 1);
          border-radius: 4px;
          height: 41px;
          line-height: 41px;
          p {
            font-size: 14px;
            font-weight: 400;
            color: rgba(230, 162, 60, 1);
            span {
              color: #E6A23C;
            }
          }
        }
      }
      .dialog-footer {
        text-align: center;
        display: block;
      }
      .pop-synchronous{
        .select-item{
          display: flex;
          align-items: center;
          margin-bottom: 15px;
          p{
            width: 100px;
            display: inline-block;
            text-align: right;
            font-size:14px;
            font-weight:600;
            color:rgba(96,98,102,1);
            span.need{
              display: inline-block;
              position: relative;
              &:before{
                content: '*';
                position: absolute;
                left: -8px;
                top: 0;
                color: red;
              }
            }
          }
          .el-select,.el-date-editor{
            width: 100%;
          }
        }
      }
      .pop-fail{
         .fail-num{
            display: flex;
           justify-content: space-between;
           align-items: center;
           margin-bottom: 15px;
           .success{
             color: #67C23A;
           }
           .failnum{
             color: #FF9328;
           }
         }
      }
    }
  }
  .list-top{
    width: 100%;
    background:rgba(255,255,255,1);
    box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
    border-radius:4px;
    border:1px solid rgba(228,231,237,1);
    display: block;
    padding-top: 10px;
    .title{
      border-left: 2px solid #67C23A;
      line-height: 31px;
      height: 31px;
      font-size:16px;
      font-weight:400;
      color:rgba(51,51,51,1);
      padding-left: 18px;
      position: relative;
      &:after{
        content: '';
        width: 98%;
        height: 1px;
        border-top:1px solid #E4E7ED;
        position: absolute;
        bottom: -4px;
        left: 0;
        right: 0;
        margin: 0 auto;
      }
    }
    .search-box{
      padding: 20px 20px 0px 20px;
   /*   border-top:1px solid #E4E7ED;*/
   /*   .el-select{
        width: 100%;
      }*/
      .el-row{
        margin-bottom: 13px;
        .grid-content{
          display: flex;
          align-items: center;
          font-size:14px;
          font-weight:400;
          color:rgba(96,98,102,1);
         /* .el-select{
            width: 100%;
          }*/
          .line-box{
            display: flex;
            align-items: center;
            .name{
              width: 128px;
            }
            .name-second{
              width: 70px;
            }
            .el-select{
              width: 495px;
            }
          }

          .select-item-bix{
            width: 100%;
            margin-right: 20px;
          }
          .el-button{
            margin-right: 20px;
            margin-left: 0;
            padding: 10px 20px;
          }
          .el-dropdown{
            margin-right: 20px;
            margin-bottom: 15px;
            .el-button-group{
              .el-button{
                padding: 10px 20px !important;
              }
            }
          }
        }
        .grid-content-box{
          text-align: left;
          .el-button{
            margin-right: 20px;
            padding: 10px 20px;
          }
          .el-dropdown{
            margin-right: 20px;
            margin-bottom: 15px;
            .el-button-group{
              .el-button{
                padding: 10px 20px !important;
              }
            }
          }
        }
      }
    }
    margin-bottom: 15px;
    .second-line{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .list-content{
    background:rgba(255,255,255,1);
    box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
    border-radius:4px;
    border:1px solid rgba(228,231,237,1);
    .row{
      .box-body{
        .table{
          thead{
            height:60px;
            line-height: 60px;
            background:#F5F7FA;
            border-bottom: 1px solid #E4E7ED;
            tr{
              height:60px;
              line-height: 60px;
              color: #606266;
              border: none;
              font-size:14px;
              th{
                border: none;
              }
            }
          }
          tbody{
            tr{
              &.bg-info{
                height:40px;
                line-height: 40px;
                background:rgba(245,247,250,1);
                td{
                  height:40px;
                  line-height: 40px;
                  label{
                    font-size:14px;
                    font-weight:600;
                    color:rgba(96,98,102,1);
                    span{
                      font-weight: normal;
                    }
                  }
                }
              }
              td{
                border: none;
              }
              &.body-data{
                &:not(:last-child){
                  /*border-bottom: 1px solid #E4E7ED;*/
                }
              }
            }
            .product-name{
              p{
                label{
                  width: 62px;
                  text-align: right;
                }
              }
            }
          }
        }
        .text-green{
          color: #67C23A;
        }
      }
    }
  }
  .table-bordered{
    border: none;
  }


/*  .input-with-select{
    .el-input-group__prepend{
      width: 120px;
    }
  }*/
  .line-box-time{
    display: flex;
    align-items: center;
    width: 680px;
  }
  .grid-content-box {
    min-width: 643px;
    padding-right: 20px;
    .el-select {
      width: 128px;
    }
    .el-input__inner{
      width: 495px;
    }
  }


  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .linehe > input {
    line-height: 34px !important;
    height: 36px !important;
  }

  .el-input__inner {
    line-height: 34px !important;
    height: 36px !important;
  }

  .el-input__icon {
    line-height: 34px !important;
  }

  @media screen {
    .for-print {
      display: none;
    }
  }

  @media print {
    #modal-order-confirm .modal-dialog {
      display: none;
    }
  }

  @media print {
    .for-print {
      display: block;
    }
  }

  .el-button{
    padding: 10px 20px;
  }


</style>
